{{ 'component-image-with-text.css' | asset_url | stylesheet_tag }}

<div class="image-banner-text image-with-text {% if section.settings.full_width %}image-with-text--full-width{% else %}page-width{% endif %} color-scheme-{{ section.settings.color_scheme }}">
  {%- if section.settings.header != blank -%}
  <div class="title">
   {{ section.settings.header }}
  </div>
{% endif %}

<div class="swiper-father">
  <div class="swiper mySwiperbanner swiper-container">
     <div class="swiper-wrapper">
      {%- for block in section.blocks -%}
        <div class="swiper-slide" {{ block.shopify_attributes }}>
          <a{% if block.settings.banner_link != blank %} href="{{ block.settings.banner_link }}"{% endif %} class="Aeaster {% if block.settings.button_style_secondary %} {% else %} {% endif %}"{% if block.settings.button_link == blank %} aria-disabled="true"{% endif %} >
            <div class="image-with-text__grid color-{{ block.settings.color_scheme }} grid grid--gapless grid--1-col grid--2-col-tablet gradient{% if block.settings.layout == 'text_first' %} image-with-text__grid--reverse{% endif %}" >
              <div class="grid__item">
                <div class="image-with-text__media image-with-text__media--{{ block.settings.height }} {% if block.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
                  {% if block.settings.height == 'adapt' and block.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}
                >
                  {%- if block.settings.image != blank -%}
                    <img
                      srcset="{%- if block.settings.image.width >= 165 -%}{{ block.settings.image | img_url: '165x' }} 165w,{%- endif -%}
                        {%- if block.settings.image.width >= 258 -%}{{ block.settings.image | img_url: '258x' }} 258w,{%- endif -%}
                        {%- if block.settings.image.width >= 323 -%}{{ block.settings.image | img_url: '323x' }} 323w,{%- endif -%}
                        {%- if block.settings.image.width >= 360 -%}{{ block.settings.image | img_url: '360x' }} 360w,{%- endif -%}
                        {%- if block.settings.image.width >= 535 -%}{{ block.settings.image | img_url: '535x' }} 535w,{%- endif -%}
                        {%- if block.settings.image.width >= 750 -%}{{ block.settings.image | img_url: '750x' }} 750w,{%- endif -%}
                        {%- if block.settings.image.width >= 1070 -%}{{ block.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
                        {%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
                        {{ block.settings.image | img_url: 'master' }} {{ block.settings.image.width }}w"
                        data-src="{{ block.settings.image | img_url: '1500x' }}"
                      sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
                      alt="{{ block.settings.image.alt | escape }}"
                      loading="lazy"
                      class="lazyload"
                      width="{{ block.settings.image.width }}"
                      height="{{ block.settings.image.height }}"
                    >
                  {%- else -%}
                    {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                  {%- endif -%}
                </div>
              </div>
              <div class="grid__item">
                <div class="image-with-text__content image-with-text__content--{{ block.settings.height }}">

                  {% if block.settings.heading != blank %}
                    <h2 class="image-with-text__heading h1">
                   {{ block.settings.heading | escape }}
                   </h2>
                  {% endif %}
                       
  
                        {% if block.settings.text != blank %}
                        <div class="image-with-text__text rte text">
                          {{ block.settings.text }}
<!--                           <img loading="lazy" src="https://cdn.shopify.com/s/files/1/0592/2167/2098/files/Group_375_1.png?v=1649841727" width="187" height="80" alt=""> -->
                        </div>
                      {% endif %}
  
                      {% if block.settings.easter != blank %}
                      <div class="image-with-text__text rte easter">
                        {{ block.settings.easter }}
                        <img loading="lazy" src="https://cdn.shopify.com/s/files/1/0563/3926/7733/files/ff.png?v=1651376918" width="103" height="82" alt="">
                      </div>
                    {% endif %}
                       
                       {% if block.settings.text_rte != blank %}
                          <div class="image-with-text__text rte no-image">
                            {{ block.settings.text_rte }}
                          </div>
                        {% endif %}

                        {%- if block.settings.button_label != blank -%}
                         <div class="twy-list">
                            <div class="button button--primary">
                              {{ block.settings.button_label | escape }}
                            </div>
                            <div class="btn-image">
                             
                           <img loading="lazy" src="https://cdn.shopify.com/s/files/1/0592/2167/2098/files/share.png?v=1646641451" width="179" height="27" alt="tenways"> 
                          </div>
                         </div>

                        {%- endif -%}  
                </div>
              </div>
            </div>
           </a>
        </div>
      {%- endfor -%}

    </div>
  </div>
  <!-- Add Arrows -->
<!--   <div class="swiper-pagination"></div>
  <div class="swiper-button-next m_banner">{% render 'swiper-next' %}</div>
  <div class="swiper-button-prev m_banner">{% render 'swiper-prev' %}</div> -->
</div>
</div>


<script>
  var swiper = new Swiper('.mySwiperbanner', {
      observer:true,//修改swiper自己或子元素时，自动初始化swiper
      observeParents:true,//修改swiper的父元素时，自动初始化swiper
      slidesPerView: 1,
      spaceBetween:36,
      autoplay: {
          delay: 4000,
          disableOnInteraction: false,
        },
      navigation: {
         nextEl: '.swiper-button-next.m_banner',
         prevEl: '.swiper-button-prev.m_banner',
      },
      pagination: {
          el: ".swiper-pagination",
          clickable: true,
        }, 
  });
</script>

{% schema %}
{
  "name": "Image banner text",
  "class": "spaced-section spaced-section--full-width",
  "settings": [
  {
    "type": "text",
    "id": "header",
    "label": "Title"
   }
  ],
  "blocks": [
  {
    "type": "banner",
    "name": "banner",
    "settings": [
    {
      "type": "url",
      "id": "banner_link",
      "label": "Banner link"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "image"
    },
      {
        "type": "text",
        "id": "heading",
        "default": "Image with text",
        "label": "Image with text"
      },
      {
        "type": "richtext",
        "id": "text",
        "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
        "label": "Richtext"
      },
      {
        "type": "richtext",
        "id": "easter",
        "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
        "label": "Easter"
      },
      {
        "type": "richtext",
        "id": "text_rte",
        "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
        "label": "Text rte"
      },
      {
        "type": "image_picker",
        "id": "image_aff",
        "label": "image aff"
      },
      {
        "type": "select",
        "id": "height",
        "options": [
          {
            "value": "adapt",
            "label": "adapt"
          },
          {
            "value": "small",
            "label": "small"
          },
          {
            "value": "large",
            "label": "large"
          }
        ],
        "default": "adapt",
        "label": "adapt"
      },
      {
        "type": "select",
        "id": "color_scheme",
        "options": [
          {
            "value": "background-1",
            "label": "background-1"
          },
          {
            "value": "background-2",
            "label": "background-2"
          },
          {
            "value": "inverse",
            "label": "inverse"
          },
          {
            "value": "accent-1",
            "label": "accent-1"
          },
          {
            "value": "accent-2",
            "label": "accent-2"
          }
        ],
        "default": "background-1",
        "label": "background-1"
      },
      {
        "type": "select",
        "id": "layout",
        "options": [
          {
            "value": "image_first",
            "label": "image_first"
          },
          {
            "value": "text_first",
            "label": "text_first"
          }
        ],
        "default": "image_first",
        "label": "image_first",
        "info": "image_first"
      },
      {
        "type": "text",
        "id": "button_label",
        "default": "Button label",
        "label": "Button label",
        "info": "Button label"
      }
    ]
  }
  ],
  "presets": [
    {
      "name": "Image banner text",
      "blocks": [
        {
          "type": "banner"
        }
      ]
    }
  ]
}
{% endschema %}
